<template>
  <div :data-theme="theme">
    <slot />
  </div>
</template>

<script setup>
import { ref, provide, onMounted, watch } from "vue";

// 从 localStorage 读取主题，默认是 "dark"
const theme = ref(localStorage.getItem("theme") || "dark");

// 提供主题给子组件
provide("theme", theme);

// 监听 theme 变化，存入 localStorage
watch(theme, (newTheme) => {
  localStorage.setItem("theme", newTheme);
});

// 组件加载时，应用存储的主题
onMounted(() => {
  document.documentElement.setAttribute("data-theme", theme.value);
});

</script>
<!-- i plan to complete my professional course studies sccriesly and achieve good gards, additionaly,i will read a large number of clasic dociment and conduct further reserch on my own topic -->
<style>
/* 亮色主题 */
/* [data-theme="light"] {
  --bg-color: #fff;
  --btn-text: #222;
  --btn-bg: white;
  --btn-text: #222;
  --bg-color-change1: #dffff3;
  --bg-color-change2: #e9d9ff;
  --bg-color-change3: rgb(249, 255, 221);
  --bg-color-deg: 270deg;
  --bg-color-flag: #f6f8fa;
} */

/* 暗色主题 */
/* [data-theme="dark"] {
  --bg-color: #0d1117;
  --btn-text: rgb(235, 235, 235);
  --btn-bg: black;
  --btn-text: rgb(235, 235, 235);
  --bg-color-change1: #0d1117;
  --bg-color-change2: #0d1117;
  --bg-color-change3: #0d1117;
  --bg-color-deg: 0deg;
  --bg-color-flag: #161b22;

} */

/* 亮色主题 */
[data-theme="light"] {
  --bg-color: #ffffff;
  --btn-text: #222222;
  --btn-bg: #f0f0f0;
  --bg-color-change1: #dffff3;
  --bg-color-change2: #e9d9ff;
  --bg-color-change3: #f9ffdd;
  --bg-color-deg: 270deg;
  --bg-color-flag: #f7f7f7;
  --border-color: #9a9da1;
  /* 亮色模式下的边框颜色（浅灰色） */

  --bg-color-diff: #f3f4f6;
  /* 额外的区分背景色，偏浅灰 */


  --primary-color: #4a6bff;
  --correct-color: #4caf50;
  --wrong-color: #f44336;
  --text-color: #2d3748;
  --text-color-flag: #222a38;
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --border-color: #e2e8f0;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --hint-color: #6b7280;
  --progress-color: var(--primary-color);
  --search-bg: #1e3c72;
  /* 保存按钮颜色 */
  --save-btn-color: #e3f2fd;
  /* 练习按钮颜色 */
  --practice-btn-color: #e8f5e9;
}

/* 暗色主题 */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --btn-text: #ebebeb;
  --btn-bg: #1c1f26;
  --bg-color-change1: #1a1a1a;
  --bg-color-change2: #1a1a1a;
  --bg-color-change3: #1a1a1a;
  --bg-color-deg: 0deg;
  --bg-color-flag: #2d2d2d;
  --border-color: #30363d;
  /* 暗色模式下的边框颜色（深灰色） */

  --bg-color-diff: #20252d;
  /* 额外的区分背景色，深灰蓝 */

  --primary-color: #6d8bff;
  /* 稍亮的蓝色，在暗背景下更显眼 */
  --correct-color: #66bb6a;
  /* 更柔和的绿色 */
  --wrong-color: #ff6b6b;
  /* 更柔和的红色 */
  --text-color: #ced4db;
  --text-color-flag: #495a79;
  /* 浅灰色文字 */
  --bg-color: #1a202c;
  /* 深灰背景 */
  --card-bg: #2d3748;
  /* 卡片背景 - 比主背景稍亮 */
  --border-color: #4a5568;
  /* 边框颜色 */
  --shadow-color: rgba(167, 167, 167, 0.1);
  /* 更深的阴影 */
  --hint-color: #a0aec0;
  /* 提示文字颜色 */
  --progress-color: var(--primary-color);
  /* 搜索页面的蓝色字体 */
  --search-bg: #2b539e;
  /* 保存按钮颜色 */
  --save-btn-color: #537083;
  /* 练习按钮颜色 */
  --practice-btn-color: #527257;
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --primary-color: #4895ef;
  --secondary-color: #8e8e8e;
  --border-color: #333;
  --card-bg: #2d2d2d;
  --hover-bg: #383838;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

}




/* 蓝色主题 */
/* 蓝色主题 */
[data-theme="blue"] {
  --bg-color: #1a1a1a;
  --btn-text: #e0e0e0;
  --btn-bg: #1c1f26;
  --bg-color-change1: #1a1a1a;
  --bg-color-change2: #1a1a1a;
  --bg-color-change3: #1a1a1a;
  --bg-color-deg: 0deg;
  --bg-color-flag: #2d2d2d;
  --border-color: #30363d;
  /* 暗色模式下的边框颜色（深灰色） */

  --bg-color-diff: #20252d;
  /* 额外的区分背景色，深灰蓝 */

  --primary-color: #6d8bff;
  /* 稍亮的蓝色，在暗背景下更显眼 */
  --correct-color: #66bb6a;
  /* 更柔和的绿色 */
  --wrong-color: #ff6b6b;
  /* 更柔和的红色 */
  --text-color: #e0e0e0;
  --text-color-flag: #495a79;
  /* 浅灰色文字 */
  --bg-color: #1a1a1a;
  /* 深灰背景 */
  --card-bg: #2d2d2d;
  /* 卡片背景 - 比主背景稍亮 */
  --border-color: #333;
  /* 边框颜色 */
  --shadow-color: rgba(87, 87, 87, 0.3);
  /* 更深的阴影 */
  --hint-color: #a0aec0;
  /* 提示文字颜色 */
  --progress-color: var(--primary-color);
  /* 搜索页面的蓝色字体 */
  --search-bg: #2b539e;
  /* 保存按钮颜色 */
  --save-btn-color: #537083;
  /* 练习按钮颜色 */
  --practice-btn-color: #527257;
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --primary-color: #4895ef;
  --secondary-color: #8e8e8e;
  --border-color: #333;
  --card-bg: #2d2d2d;
  --hover-bg: #383838;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 基础样式 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease-in-out;
}
</style>
